<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/*浮动元素
		元素脱离文档流,元素从当前所在的行向左或向右浮动,当撞到上级元素边框或其他浮动元素时停止。
		
				通过元素的外边距控制位置
				
				 clear:both; 禁止两侧出现浮动元素 
				 如果元素的所有子元素全部浮动则自动识别高度为0通过    overflow:hidden解决
		
		***当需要把纵向排列的元素改成横向排列时使用浮动定位****  无序列表~~~
*/
	body>div{
		width: 200px;
		height: 200px;
		border: 4px solid red;   /*边框*/
	}
	div>div{
		width: 80px;
		height: 50px;
	}
	#d1{

		background-color: black; 
	}
	#d2{
		 background-color: pink; 
		 clear:both;/* 禁止两侧出现浮动元素 */
		 float:right;
	} 	
	#d3{
		background-color: yellow;
	}
</style>
</head>
<body>	
<div>
	<div id="d1"></div>
	<div id="d2"></div>
	<div id="d3"></div>
</div>
</body>
</html>